
import React, { forwardRef, useState, useCallback, useContext } from 'react'
import { Checkbox, Button, Select } from "antd";
import CustomizeModal, { CustomizeModalContext } from "@common/presentational/CustomizeModal";
import { arrayToObject } from "@utils/arrayHelper";
import BilinIcon from "@common/presentational/BilinIcon";

// 商品选择框
const MultiSelectProductContent = props => {
    const { initSelectedInfo, onChange, initData } = props
    const [selectedInfo, setSelectedInfo] = useState(initSelectedInfo || [])
    const { hide } = useContext(CustomizeModalContext)
    const selectedInfoMap = useCallback(arrayToObject(selectedInfo, 'storage_key'), [selectedInfo])

    const handleSelectedInfoChange = useCallback(prod => {
        if (selectedInfoMap[prod.storage_key]) {
            setSelectedInfo(selectedInfo.filter(item => item.storage_key !== prod.storage_key))
        } else {
            setSelectedInfo([
                ...selectedInfo,
                prod
            ])
        }
    }, [selectedInfo])

    const cancelStoreSelected = useCallback(index => {
        setSelectedInfo([
            ...selectedInfo.slice(0, index),
            ...selectedInfo.slice(index + 1)
        ])
    }, [selectedInfo])

    const selectAll = useCallback(e => {
        const checked = e.target.checked
        if (checked) {
            setSelectedInfo([
                ...selectedInfo,
                ...(initData || []).filter(prod => !selectedInfoMap[prod.storage_key])
            ])
        } else {
            setSelectedInfo(_.differenceWith(selectedInfo, (initData || []), (a, b) => b.storage_key === a.storage_key))
        }
    }, [selectedInfo])

    const selectedSubmit = useCallback(() => {
        onChange && onChange(selectedInfo);
        hide()
    }, [onChange, selectedInfo])


    return (
        <>
            <div className="multi-select-body">
                <div className="multi-select-left">
                    <div className="item-selected-container" >
                        {(initData || []).map(prod => (
                            <div className={`product-box${selectedInfoMap[prod.storage_key] ? ' selected' : ''}`}
                                key={prod.storage_key}
                                onClick={handleSelectedInfoChange.bind(this, prod)}
                            >
                                <img src={prod.pic} alt="" className="product-pic" />
                                <div className="product-name">{prod.name}</div>
                                <div className="product-price">{prod.price_range}</div>
                                <Checkbox className="checkbox-icon" checked={selectedInfoMap[prod.storage_key]} />
                            </div>
                        ))}
                    </div>
                </div>
                <div className="multi-select-right">
                    <div className="ft-clr-md ft-12">已选商品（{selectedInfo.length}）</div>
                    {selectedInfo.map((prod, index) => (
                        <div className="select-line" key={prod.storage_key}>
                            <span>{prod.name}</span>
                            <BilinIcon type="design-delete" onClick={cancelStoreSelected.bind(this, index)}/>
                        </div>
                    ))}
                </div>
            </div>
            <div className="multi-select-footer">
                <Checkbox onChange={selectAll.bind(this)} checked={_.differenceWith((initData || []), selectedInfo, (a, b) => a.storage_key === b.storage_key).length === 0}>全选</Checkbox>
                <Button className="button-large" type="primary" onClick={selectedSubmit.bind(this)}>选好了</Button>
            </div>
        </>
    )
}


export const InitSelectProductModal = forwardRef(({ title, ...props }, ref) => {
    return (
        <CustomizeModal title={title} className="multi-select-modal" width={820} ref={ref}>
            <MultiSelectProductContent {...props} />
        </CustomizeModal>
    )
})
